<script setup>
	import {
		ref
	} from 'vue';
	import {
		useRoute,
		onBeforeRouteUpdate
	} from 'vue-router'
	import HelloWorld from './components/HelloWorld.vue'
	import AlertBox from './components/AlertBox.vue';
	import {
		useMouse
	} from './funjs/mouse';

	const {
		x,
		y
	} = useMouse()

	const userRoutes = ref(['/jssx', '/bindclass', '/ifandfor', '/eventdemo', '/formdemo', '/watchdemo',
		'/templaterefdemo', '/templatebasic', '/denycom', '/modeldemo','/fetchdemo', '/highlightcommand', 
		'/defaulttransitionlearn','/customtrans', '/deeptrans', '/jstrans', '/switchtrans', '/comtrans', 
		'/keytrans', '/listtransgroup','/listtransgrouptwo', '/statecontrol', '/customrouter', '/immer',
		'/相册','/用户列表','/轮播图','/商品','/游鱼动画1','/游鱼动画2'
	])

	const route = useRoute()
</script>

<template>
	<img alt="Vue logo" src="./assets/logo.png" />
	<AlertBox>
		<p style="color: aquamarine;">
			Mouse position is at: {{ x }}, {{ y }}
		</p>
		<h1>{{ $translate('greetings.hello') }}</h1>
	</AlertBox>
	<p>
		<a href="../slotpage.html" class="mainamagin">插槽学习页</a>
		<a href="../innercompage.html" class="mainamagin">内部组件学习页</a>
		<a href="../routerlearn.html" class="mainamagin">router学习页</a>
		<a href="../jdlearnpage.html" class="mainamagin">京东基础练习</a>
	</p>
	<p>
		<HelloWorld greeting-message="Hello Vue 3 + Vite" />
		<strong>Current route path:</strong> {{ $route.fullPath }}
	</p>

	<nav>
		<ul class="mainul">
			<li v-for="item in userRoutes" class="mainli">
				<router-link :to="item">{{item}}</router-link>
			</li>
		</ul>
	</nav>

	<main>
		<p style="height: 700px;">
			<RouterView />
		</p>
	</main>
</template>

<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 20px;
	}

	nav,
	main {
		border: 2px solid #000;
		margin-bottom: 10px;
		padding: 10px;
	}

	nav>a+a {
		margin-left: 10px;
	}

	h2 {
		border-bottom: 1px solid #ccc;
		margin: 0 0 20px;
	}

	.mainul {
		display: flex;
		flex-wrap: wrap;
		list-style: none;
		padding: 0;
		margin: 0;
	}

	.mainli:not(:last-of-type) {
		margin-right: 1rem;
	}

	.router-link-active {
		color: orange;
	}

	.router-link-exact-active {
		color: crimson;
	}
	
	.mainamagin {
		margin-right: 1rem;
	}
</style>